import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import { connect } from 'dva';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Button, Input, Spin, Table, message, InputNumber, Modal, Select, Drawer, DatePicker } from 'antd';
import styles from "./index.less";
import pen from '@/assets/knowledge/pen.png';
import deleteZdy from '@/assets/knowledge/delete.png';
import EditorDrawer from './editorDrawer.js'
import 'moment/locale/zh-cn';
const Search = Input.Search;
const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker, RangePicker } = DatePicker;
const monthFormat = 'YYYY-MM';
moment.locale('zh-cn');
class BusinessKnowledgeBase extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectPd: '财务指标',
      pageSize: 10,
      page: 1,
      totala: 2,
      login: false,
      close: false,
      timeCs: String(moment().format("YYYY-MM")),
      allList: []
    };
  }

  componentDidMount() {
    this.fetch()
    //  this.doAdd()
  }

  // 主页列表 
  fetch = () => {
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    const { selectPd, page, pageSize, timeCs } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'businessKnowledgeBase/businessGetList',
        payload: { reportType: selectPd, page, pageSize, endTime: timeCs },
        callback: res => {
          console.log('列表数据', res)
          // let a = res.data.map((item, index) => {
          //   item['key'] = index
          // })
          this.setState({
            allList: res.data,
            totala: Number(res.total),
            login: false
          })
        },
      });
    });
  }

  businessdoRemove = (id) => {
    this.setState({ login: true })
    const { dispatch, currentUser } = this.props;
    const { selectPd, page, pageSize, timeCs } = this.state
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'businessKnowledgeBase/businessdoRemove',
        payload: { _id:id },
        callback: res => {
          console.log('列表数据', res)
          this.setState({
            login: false
          },()=>{
            this.fetch()
          })
        },
      });
    });
  }

  delAxios = (item) => {
    console.log('删除数据', item)
    this.businessdoRemove(item._id)
  }

  // 表单数据
  userInfo = () => {
    return this.props.form.getFieldsValue();
    // 使用方法 
    // let user  = this.userInfo()
    // console.log(user)
  }


  pageWay = (a) => {
    console.log(a)
    this.setState({ page: a }, () => {
      this.fetch()
    })
  }

  onShowSizepageWay = (a, b) => {
    console.log(a, b)
    this.setState({ page: a, pageSize: b }, () => {
      this.fetch()
    })
  }

  handleDelete = (item) => {
    // 编辑页
    this.setState({ close: true })
    console.log('编辑页', item)
    this.setState({ bjTime: item })
  }

  addTwo = () => {
    this.setState({ close: true })
    this.setState({ bjTime: '1' })
    
  }

  check = () => {
    let user = this.userInfo()
    console.log(user)
    console.log('123', moment(user.date._d).format("YYYY-MM")) // 时间
    this.setState({
      selectPd: user.select,
      timeCs: moment(user.date._d).format("YYYY-MM")
    }, () => {
      this.fetch()
    })
  }

  delDelete = (item) => {
    console.log('删除', item)
    Modal['confirm']({
      title: '删除任务',
      content: '是否确定删除该指标？',
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.delAxios(item)
      },
      onCancel() {
        console.log('取消删除')
      }
    })
  }

  openClose = () => {
    this.setState({ close: true })
  }

  onClose = () => {
    this.setState({
      close: false,
    });
  };

  refresh = (val) => {
    console.log(val)
    this.setState({
      close: false,
    }, () => {
      this.fetch()
    });
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    const { selectedRowKeys } = this.state;
    const columns = [
      {
        title: '报告类型',
        width: 'calc(30vw)',
        dataIndex: 'reportType',
        render(item) {
          return (
            <div dangerouslySetInnerHTML={{ __html: item }}></div>
          )
        }
      },
      {
        title: '截至月份',
        width: 'calc(35vw)',
        // sorter: (a, b) => { },
        dataIndex: 'endTime',
        render(item) {
          return (
            <span>{moment(item).format("YYYY-MM")}</span>
          )
        }
      },

      {
        title: '操作',
        width: 'calc(15vw)',
        render: (text, item) => {
          return (
            <div className={styles.pb}>
              <div
                className={styles.buttongl}
                onClick={(text) => { this.handleDelete(item) }}>
                <img src={pen} style={{ marginRight: 5 }} />
                <FormattedMessage id="app.wordTroughManage.edit" />
              </div>
              <div
                style={{ marginLeft: 10, background: '#e8313b' }}
                className={styles.buttongl}
                onClick={(text) => { this.delDelete(item) }}>
                <img src={deleteZdy} style={{ marginRight: 5 }} />
                <span>
                  删除
                </span>
              </div>
            </div>
          )
        }
      },
    ]
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <div style={{ minHeight: 'calc(100vh - 150px)', background: '#ffffff' }}>
            <Row className={styles.colorBackground}>
              <Col style={{ padding: 10, color: '#4B5475', fontWeight: 600 }} xs={24}>
                <div className={styles.title}>
                  <span>业务知识库</span>
                </div>
              </Col>
            </Row>
            <div className='cardZdy'>
              <Card
                bordered={false}
              >
                <Form layout="inline">
                  <FormItem>
                    <Button onClick={this.addTwo} icon="plus" type='primary'>添加</Button>
                  </FormItem>
                  <span style={{ float: "right" }}>
                    <FormItem>
                      <div>
                        <span style={{ marginRight: 10 }}>报告类型</span>
                        {getFieldDecorator('select', {
                          initialValue: this.state.selectPd,
                        })(
                          <Select style={{ width: 160 }}>
                            {/* <Option value="全部类型">全部类型</Option> */}
                            <Option value="财务指标">财务指标</Option>
                          </Select>
                        )}
                        <span style={{ margin: '0px 10px' }}>截至月份</span>
                        {getFieldDecorator('date', {
                          initialValue: moment(String(moment().format("YYYY-MM")), 'YYYY-MM'),
                        })(
                          <MonthPicker style={{ width: 160 }} format={monthFormat} />
                        )}
                      </div>
                    </FormItem>
                    <FormItem>
                      <Button onClick={this.check} icon="check">查看</Button>
                    </FormItem>
                  </span>
                </Form>
                <div className='tableyc'>
                <Spin spinning={this.state.login}>
                  <Table
                    // className='zdyTable'
                    // onChange={this.pXhandleChange} //排序
                    style={{ padding: '20px 0px 0px 0px' }}
                    columns={columns}
                    dataSource={this.state.allList}// 数据
                    // onChange={this.handleChange}
                    pagination={{  // 分页
                      total: this.state.totala,
                      pageSize: this.state.pageSize,  // 显示几条一页
                      current: this.state.page, // 当前页
                      showSizeChanger: true,  // 是否显示可以设置几条一页的选项
                      showQuickJumper: true,
                      onChange: this.pageWay,
                      onShowSizeChange: this.onShowSizepageWay
                    }}
                  />
                </Spin>
                </div>
                <Drawer
                  className='cardZdy'
                  title='业务知识编辑'
                  placement="right"
                  closable
                  onClose={this.onClose}
                  visible={this.state.close}
                  width={900}
                  destroyOnClose
                >
                  <EditorDrawer refresh={this.refresh} bjTime={this.state.bjTime}></EditorDrawer>
                </Drawer>
              </Card>
            </div>
          </div>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(BusinessKnowledgeBase));



